<template>
    <div class="userMsg">
        <!-- 修改性别 -->
        <header class="mui-bar mui-bar-nav bg-color">
            <!--返回按钮-->
            <span class="iconfont icon-fanhui header_fanhui" @tap="gtolast()"></span>
            <!--标题-->
            <h1 class="mui-title">个人信息</h1>
        </header>
        <CrossLine style="margin-top:44px;"></CrossLine>
            <ul style="background:#fff;" >
				<li class="mui-table-view-cell">
                    <span class="usertit">头像</span>
                    <span class="userpams" >
                        <img v-if="user.headimgurl" style="border-radius:100%;position:relative;top:3px;" :src="user.headimgurl" alt="" width="20.5" height="20.5">
                        <img v-else style="border-radius:100%;position:relative;top:3px;" src="../hed.png" alt="" width="20.5" height="20.5">
                    </span>
				</li>
				<li class="mui-table-view-cell" @tap="alterName">
					<a class="mui-navigate-right">
						<span class="usertit" >姓名</span>  
                        <span  class="userpams" >{{userInfo.name}}</span>
					</a>
				</li>
				<li class="mui-table-view-cell" @tap="alterSex">
					<a class="mui-navigate-right">
						<span class="usertit">性别</span>  
                        <span  class="userpams" v-if="userInfo.sex == 0">男</span>
                        <span  class="userpams" v-else>女</span>
					</a>
				</li>
                <!-- <li class="mui-table-view-cell"  @tap="showDtpicker">
					<a class="mui-navigate-right">
						<span class="usertit">出生日期</span>  
                        <span  class="userpams"  data-options='{"type":"date","beginYear":2014,"endYear":2016}'>{{birthData}}</span>
					</a>
				</li> -->
                <li class="mui-table-view-cell" @tap="alterAddress">
					<a class="mui-navigate-right">
						<span class="usertit">联系地址</span>
                        <span  class="userpams" style="width:70%;overflow:hidden;text-align:right" v-if="userInfo.city">{{userInfo.country+userInfo.province+userInfo.city}}</span>
                        <span  class="userpams" style="width:70%;overflow:hidden;text-align:right" v-else>{{userAddress}}</span>
					</a>
				</li>
                 <li class="mui-table-view-cell">              
                    <span class="usertit">登录号码</span>  
                    <span  class="userpams">{{userInfo.mobile}}</span>				
				</li>
                 <li class="mui-table-view-cell">              
                    <span class="usertit">我的导购</span>  
                    <span  class="userpams">{{userInfo.salerName}}</span>				
				</li>
			</ul>
            
    </div>
</template>

<script>
    import mui from 'static/js/mui'
    import CrossLine from '@/components/base/cross-line/cross-line'
    import storage from '@/utils/localstorage'
    import 'static/js/mui.picker.js'
    import 'static/js/mui.poppicker.js'
    import 'static/js/mui.dtpicker.js'
    import { mapGetters } from 'vuex'
    export default {
        data() {
            return{
                userInfo: {},
                sex:"男",
                cityPicker3: '',
                dtpicker:'',
                userAddress: '',
                address: '江苏省无锡市锡山区',
                birthData:'2018年12月12日',
                data_options:{
                    "type":"date",
                    "beginYear":1949,
                    "endYear":2016
                }
            }
        },
        components: {
            CrossLine,
        },
        props: {},
        methods: {
            gtolast(){
                this.$router.push({
                    path:"/min"
                })
            },
            alterName(){
                this.$router.push({
                    path:"/alterName"
                })
            },
            alterSex(){
                this.$router.push({
                    path:"/alterSex",
                })
            },
            alterBirthDate(){
                this.$router.push({
                    path:"/alterBirthDate"
                })
            },
            alterAddress(){
                this.$router.push({
                    path:"/alterCityAddress"
                })
            },
            getParams() {
                //获取路由参数'
                let routeVal = this.$route.params
                //console.log(routeVal);
                if(JSON.stringify(routeVal)!=="{}"){
                        this.sex=routeVal.alterSex
                }
            },
            showCityPickerButton() {
                let that = this
				this.cityPicker3.show(function(items) {
					that.address = (items[0] || {}).text + (items[1] || {}).text + (items[2] || {}).text;
				});
			},
            showDtpicker(){
                let that = this
                this.dtpicker.show(function(items){
                    that.birthData = items.y.text + "年" +items.m.text+"月"+items.d.text+"日"
                    //console.log(that.birthData)
                })
            }
        },
        filters: {},
        computed:{
            ...mapGetters([
                'user'
            ])
        },
        created() {
            this.getParams()
            this.userInfo = storage.getLocalstorage('user')
            if(this.userInfo.area == null && this.userInfo.address == null){
               this.userAddress = ''
            }else{
               this.userAddress = this.userInfo.area + this.userInfo.address
            }
        },
        mounted() {
            mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
            //地址
            this.cityPicker3 = new mui.PopPicker({
                layer: 3
            });
            this.cityPicker3.setData(this.$store.state.appData.cityData3);      

            // 日期
            this.dtpicker = new mui.DtPicker(this.data_options)
        },
    };
</script>

<style lang="scss" scoped>

    @import '~static/css/mui.picker.min.css'; 
    .userpams{
        float:right;margin-right:20px;
        color:#999999;font-size:0.6rem;position:relative;top:1px;
    }
    .usertit{
        font-size:0.75rem;
        color:#333333;
    }

    .mui-table-view-cell:after {
        background-color: #E9E9E9;
    }
    .mui-bar {
        z-index:2;
        background-color: #fff;
        -webkit-box-shadow:none;
        box-shadow:none;
        border-bottom:1px solid #ddd;
    }
    .header_fanhui{
        line-height: 43px;
        font-size: 0.9rem;
        width: 43px;
    }
</style>